{extend name="public/base" /}
{block name="style"}
    <style>

        /* 用户信息区域 */
        .user-info-card {
            background-color: white;
            border-radius: 10px;
            padding: 15px;
            margin: 10px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }

        .user-info-top {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .user-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #f0f9f0;
            margin-right: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }

        .user-base-info {
            flex: 1;
            min-width: 0;
        }

        .user-name {
            font-size: 17px;
            color: #333;
            font-weight: 600;
            margin-bottom: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .user-id {
            font-size: 12px;
            color: #888;
            margin-bottom: 3px;
        }

        .user-status-group {
            display: flex;
            gap: 6px;
            align-items: center;
            flex-wrap: wrap;
        }

        .verify-status {
            font-size: 11px;
            display: inline-flex;
            align-items: center;
            padding: 1px 6px;
            border-radius: 3px;
        }
        .verify-status.verified {
            color: #1AAD19;
            background-color: #f0fff4;
        }
        .verify-status.unverified {
            color: #E64340;
            background-color: #fff5f5;
        }
        .verify-status i {
            margin-right: 3px;
            font-size: 10px;
        }

        .user-level {
            display: inline-block;
            padding: 1px 6px;
            background-color: #f0f9f0;
            color: #1AAD19;
            font-size: 11px;
            border-radius: 3px;
            font-weight: 500;
        }

        /* 快捷功能入口 - 强制两行三列 */
        .quick-functions {
            display: flex;
            flex-wrap: wrap; /* 允许换行 */
            padding: 0 10px;
            margin-bottom: 10px;
            gap: 8px; /* 按钮之间的间距（横向和纵向） */
        }

        .function-item {
            /* 核心：计算宽度确保每行3个 */
            flex: 1 0 calc((100% - 16px) / 3); /* 100%宽度减去2个间距（8px*2），再除以3 */
            max-width: calc((100% - 16px) / 3); /* 限制最大宽度，防止拉伸 */
            min-width: auto; /* 取消最小宽度限制，由计算宽度主导 */
            background-color: white;
            border-radius: 8px;
            padding: 12px 0;
            text-align: center;
            text-decoration: none;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            transition: all 0.2s;
            position: relative; /* 新增：为未读徽章提供定位基准 */
        }
        .function-item:active {
            transform: scale(0.98);
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }

        .function-icon {
            width: 36px;
            height: 36px;
            border-radius: 6px;
            margin: 0 auto 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: white;
        }
        .icon-asset { background-color: #1AAD19; }
        .icon-order { background-color: #2B85E4; }
        .icon-message { background-color: #FF9F43; }
        .icon-recharge { background-color: #1AAD19; }
        .icon-withdraw { background-color: #2B85E4; }
        .icon-flow { background-color: #FF9F43; }
        .function-name {
            font-size: 13px;
            color: #333;
            font-weight: 500;
            white-space: nowrap; /* 防止文字换行 */
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* 新增：未读消息徽章样式 */
        .unread-badge {
            position: absolute;
            top: 5px; /* 距离顶部的距离 */
            right: 20px; /* 距离右侧的距离 */
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background-color: #E64340; /* 红色背景 */
            color: white; /* 白色文字 */
            font-size: 12px;
            text-align: center;
            line-height: 18px; /* 垂直居中 */
            font-weight: bold;
            box-shadow: 0 1px 3px rgba(230, 67, 64, 0.3); /* 轻微阴影增强立体感 */
        }

        /* 菜单列表 */
        .menu-list {
            background-color: white;
            border-radius: 8px;
            margin: 0 10px 10px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            overflow: hidden;
        }

        .menu-section {
            border-bottom: 1px solid #f5f5f5;
        }
        .menu-section:last-child {
            border-bottom: none;
        }

        .menu-item {
            display: flex;
            align-items: center;
            padding: 13px 15px;
            color: #333;
            text-decoration: none;
            transition: background-color 0.2s;
        }
        .menu-item:active {
            background-color: #f9f9f9;
        }

        .menu-item-icon {
            width: 26px;
            height: 26px;
            border-radius: 6px;
            margin-right: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
        }
        .menu-item-icon.verify-icon {
            color: #E64340;
            background-color: #fff5f5;
        }
        .menu-item-icon.password-icon {
            color: #2B85E4;
            background-color: #f0f7ff;
        }

        .menu-item-text {
            flex: 1;
            font-size: 15px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .menu-item-text.verify-prompt {
            color: #E64340;
        }
        .menu-item-subtext {
            font-size: 11px;
            color: #888;
            margin-top: 1px;
        }

        .menu-item-arrow {
            color: #ccc;
            font-size: 15px;
            transition: transform 0.2s;
            padding-left: 5px;
        }
        .menu-item:active .menu-item-arrow {
            transform: translateX(3px);
        }
    </style>
{/block}
{block name="content"}
<div class="header">
    <a href="javascript:void(0);" class="back-btn">
        <i class="fa fa-angle-left" style="font-size: 24px;"></i>
    </a>
    <h1 class="header-title">个人中心</h1>
</div>
<div class='weui-content'>
    <!-- 钱包总览 -->
    <!-- 用户信息卡片 -->
    <div class="user-info-card">
        <div class="user-info-top">
            <img src="/static/index/images/headimg.jpg" alt="用户头像" class="user-avatar">
            <div class="user-base-info">
                <div class="user-name">{$member->realname|default="未认证"}</div>
                <div class="user-id">ID: {$member->id}</div>
                <div class="user-status-group">
                    <div class="verify-status unverified">
                        <i class="fa fa-exclamation-circle"></i>
                        {switch name="member['audit_status']"}
                            {case value="0"}
                                    未认证
                            {/case}
                        {case value="1"}
                            认证审核中
                        {/case}
                        {case value="2"}
                            认证成功
                        {/case}
                                {/default}
                            认证失败
                         {/switch}
                    </div>
                    <div class="user-level">普通会员</div>
                </div>
            </div>
        </div>
    </div>

    <div class="quick-functions">
        <a href="/asset.html" class="function-item">
            <div class="function-icon icon-asset">
                <i class="fa fa-money"></i>
            </div>
            <div class="function-name">我的资产</div>
        </a>
        <a href="/trade-list.html" class="function-item">
            <div class="function-icon icon-order">
                <i class="fa fa-list-alt"></i>
            </div>
            <div class="function-name">我的订单</div>
        </a>
        <a href="/letter-list.html" class="function-item">
            <!-- 新增：未读消息徽章 -->
            <span class="unread-badge">{$count}</span>
            <div class="function-icon icon-message">
                <i class="fa fa-bell"></i>
            </div>
            <div class="function-name">消息中心</div>
        </a>
        <a href="/pay-list.html" class="function-item">
            <div class="function-icon icon-recharge">
                <i class="fa fa-download"></i>
            </div>
            <div class="function-name">充值列表</div>
        </a>
        <a href="/withdraw-list.html" class="function-item">
            <div class="function-icon icon-withdraw">
                <i class="fa fa-upload"></i>
            </div>
            <div class="function-name">提现列表</div>
        </a>
        <a href="/record.html" class="function-item">
            <div class="function-icon icon-flow">
                <i class="fa fa-exchange"></i>
            </div>
            <div class="function-name">流水列表</div>
        </a>
    </div>

    <div class="menu-list">
        <div class="menu-section">
            <a href="javascript:void(0);" class="menu-item" id="certificate">
                <div class="menu-item-icon verify-icon">
                    <i class="fa fa-id-card"></i>
                </div>
                <div class="menu-item-text verify-prompt">实名认证</div>
                <div class="menu-item-arrow">
                    <i class="fa fa-chevron-right"></i>
                </div>
            </a>
            <a href="{$customer_link}" class="menu-item">
                <div class="menu-item-icon">
                    <i class="fa fa-solid fa-phone"></i>
                </div>
                <div class="menu-item-text">我的客服</div>
                <div class="menu-item-arrow">
                    <i class="fa fa-chevron-right"></i>
                </div>
            </a>
        </div>

        <!-- 安全相关菜单分组 -->
        <div class="menu-section">
            <a href="/change-login-passwd.html" class="menu-item">
                <div class="menu-item-icon password-icon">
                    <i class="fa fa-lock"></i>
                </div>
                <div>
                    <div class="menu-item-text">登录密码设置</div>
                    <div class="menu-item-subtext">已设置，可修改</div>
                </div>
                <div class="menu-item-arrow">
                    <i class="fa fa-chevron-right"></i>
                </div>
            </a>
            <a href="/set-withdraw-passwd.html" class="menu-item">
                <div class="menu-item-icon password-icon">
                    <i class="fa fa-shield"></i>
                </div>
                <div>
                    <div class="menu-item-text">提现密码设置</div>
                    {empty  name="member['trade_passwd']"}
                      <div class="menu-item-subtext">未设置，建议开启</div>
                        {else}
                      <div class="menu-item-subtext">已经开启</div>
                   {/empty}
                </div>
                <div class="menu-item-arrow">
                    <i class="fa fa-chevron-right"></i>
                </div>
            </a>
            <a href="/address-list.html" class="menu-item">
                <div class="menu-item-icon">
                    <i class="fa fa-credit-card"></i>
                </div>
                <div class="menu-item-text">提现地址管理</div>
                <div class="menu-item-arrow">
                    <i class="fa fa-chevron-right"></i>
                </div>
            </a>
            <a href="/invite.html" class="menu-item">
                <div class="menu-item-icon">
                    <i class="fa fa-solid fa-user"></i>
                </div>
                <div class="menu-item-text">我的推广</div>
                <div class="menu-item-arrow">
                    <i class="fa fa-chevron-right"></i>
                </div>
            </a>
        </div>
    </div>

    <!-- 退出登录 -->
    <a href="/logout.html" class="logout-btn">退出登录</a>
</div>
<footer class="wy-footer">
    <a href="/" class="footer-nav">
        <i class="fa fa-home"></i>
        <span>首页</span>
    </a>
    <a href="/list.html" class="footer-nav">
        <i class="fa fa-line-chart"></i>
        <span>行情</span>
    </a>
    <a href="/asset.html" class="footer-nav">
        <i class="fa fa-cube"></i>
        <span>资产</span>
    </a>
    <a href="javascript:void(0);" class="footer-nav active">
        <i class="fa fa-user"></i>
        <span>我的</span>
    </a>
</footer>
{/block}
{block name="script"}
    <script>
        var audit_status = "{$member->audit_status}";
        $(function(){
            $("#certificate").click(function () {
                if (audit_status==0||audit_status==3) {
                    window.location.href= "/certificate.html";
                } else if(audit_status==1) {
                    $.toptip("认证中","error")
                } else {
                    $.toptip("认证成功","success");
                }
            });
        })
        </script>
{/block}